<template>
  <keep-alive>
    <component :is="componentName(value.status || status)"
               v-bind="$attrs"
               :value="value"
               v-on="$listeners" />
  </keep-alive>
</template>

<script>
import QuotationHeader from './Header.vue'
import DraftHeader from './DraftHeader.vue'
import DickerPriceHeader from './DickerPriceHeader.vue'
import TreatReviewedHeader from './TreatReviewedHeader.vue'
import CloseSentHeader from './CloseSentHeader.vue'

const HEADER_MAP = new Map([
  [2, 'DraftHeader'],
  [8, 'DickerPriceHeader'],
  [14, 'TreatReviewedHeader'],
  [4, 'CloseSentHeader'],
  ['default', 'QuotationHeader']
])

export default {
  name: 'ActionComponent',
  components: {
    QuotationHeader,
    DraftHeader,
    DickerPriceHeader,
    TreatReviewedHeader,
    CloseSentHeader
  },
  props: {
    value: {
      type: Object,
      default: () => { }
    },
    status: {
      type: Number,
      default: null
    }
  },
  computed: {
    componentName () {
      return pos => HEADER_MAP.get(pos) || HEADER_MAP.get('default')
    }
  }
}
</script>

<style>
</style>